<template>
  <div class="login-form">
    <div class="g-form">
      <div class="g-form-line">
        <span class="g-form-label">用户名：</span>
        <div class="g-form-input">
          <input type="text" placeholder="请输入用户名" v-model="userName">
        </div>
        <span class="g-form-error">{{userErrors.errorText}}</span>
      </div>
      <div class="g-form-line">
        <span class="g-form-label">密码：</span>
        <div class="g-form-input">
          <input type="password" placeholder="请输入密码" v-model="userPassword">
        </div>
        <span class="g-form-error" >{{passwordErrors.errorText}}</span>
      </div>
      <div class="g-form-line">
        <div class="g-form-btn">
          <a class="button" @click="onLogin">登录</a>
        </div>
      </div>
      <p>{{errorText}}</p>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        userName:'',
        userPassword:'',
        errorText:''
      }
    },
    computed:{
      userErrors(){
        let status,errorText
        var re = /@/g
        if(!re.test(this.userName)){
          status = false
          errorText='不包含@'
        }else{
          status = true
          errorText=''
        }
        if(!this.userFlag){
          errorText = ''
          this.userFlag = true
        }
        return {
          status,
          errorText
        }
      },
      passwordErrors(){
        let status,errorText
        var re = /^\w{1,6}$/
        if(!re.test(this.userPassword)){
          status = false
          errorText='长度不对'
        }else{
          status = true
          errorText=''
        }
        if(!this.passFlag){
          errorText = ''
          this.passFlag = true
        }
        return {
          status,
          errorText
        }
      }
    },
    methods:{
      onLogin(){
        if(!this.userErrors || !this.passwordErrors){
          this.errorText = '部分选项未通过'
        }
        else{
          this.errorText = ''
          this.$http.get('api/login').then((res) =>{
            console.log(res.data)
            this.$emit('has-log',res.data)
          },(error) => {
            console.log(error)
          })
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>
